@import "../../Master/index";

.VipCard {
  .Masterfun();
  height: 100%;
  min-height: 100%;
  background: linear-gradient(to bottom, rgba(99, 99, 99, 0.0), rgba(49, 49, 49, 0.69));
  .head-img{
    color: #fff;
    width: 100%;
    text-align: right;
    img{
      width: 100%;
    }
  }
  .card {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    //background: linear-gradient(to bottom, rgba(99, 99, 99, 0.0), rgba(49, 49, 49, 0.69)), url('../../../img/PunchCard/invalid-name@3x.png') no-repeat;
    background-size: 120%;
    //&:after {
    //  content: "";
    //  width: 100%;
    //  height: 100%;
    //  position: absolute;
    //  left: 0;
    //  top: 0;
    //  //background: inherit;
    //  //filter: blur(0px);
    //  z-index: 2;
    //}
    .img {
      position: relative;
      z-index: 3;
      width: 65%;
      margin: auto;
      //padding-top: 10%;
      box-sizing: border-box;
      img {
        width: 100%;
        border-radius: .67rem;
        border: .15rem solid rgba(255, 255, 255, .5);
      }
    }
    .div {
      color: #fff;
      font-size: 1.2rem;
      height: 7%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      z-index: 3;
      opacity: 0.5;
      p {
        padding: .2rem .7rem;
        border-radius: 5rem;
      }
      &:after {
        content: '';
        display: inline-block;
        width: 2.5rem;
        border-top: .1rem solid #fff;
        opacity: 0.2;
      }
      &:before {
        content: '';
        display: inline-block;
        width: 2.5rem;
        border-top: .1rem solid #fff;
        opacity: 0.2;
      }
    }
    .btn {
      width: 30%;
      //position: absolute;
      //left: 50%;
      //z-index: 500;
      margin-left: -15%;
      //bottom: 2rem;
      position: relative;
      left: 50%;
      z-index: 500;
      height: 2rem;
      margin-top: .5rem;
      border-radius: 5rem;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: @fontSize15;
      background-color: rgba(255, 255, 255, .2);
      border: .2rem solid rgba(255, 255, 255, .1);
    }
  }
  canvas {
    display: none;
    letter-pacing: 15px;
  }
  .closed {
    position: absolute;
    top: .3rem;
    right: .6rem;
    i {
      font-size: 1.3rem;
      color: @Master80;
    }
  }
  .popup-content {
    .head {
      width: 100%;
      height: 8rem;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      background: transparent;
      position: relative;
      img {
        width: 15rem;
        position: absolute;
        left: 50%;
        margin-left: -7.5rem;
        bottom: -7.5rem;
        z-index: 3500;
        display: block;
        animation: spin 1s;
        -webkit-animation: spin 1s;
        animation-fill-mode: forwards;
        transform: rotate(0deg);
      }
      .bgd {
        width: 20rem;
        height: 20rem;
        background: url("../../../img/PunchCard/xing.gif") no-repeat;
        background-size: 100%;
        background: #fff;
        position: absolute;
        left: 50%;
        bottom: -13rem;
        margin-left: -10rem;
        z-index: 3550;
        animation: contes .7s;
        -webkit-animation: contes .7s;
        animation-fill-mode: forwards;
      }
      .Yellowbg {
        position: absolute;
        left: 50%;
        bottom: -0rem;
        z-index: 4000;
        width: 6rem;
        height: 6rem;
        margin-left: -3rem;
        margin-bottom: -3rem;
        border-radius: 100%;
        box-sizing: border-box;
        border: .4rem solid #fff;
        background-color: @Mastercolor;
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          display: inline-block;
          width: 3rem;
          height: 3rem;
          background: url("../../../img/PunchCard/true.gif") no-repeat;
          background-size: 100%;
          /*border: .3rem solid #fff;*/
          /*border-top-width: 0;*/
          /*border-right-width: 0;*/
          /*-webkit-transform: rotate(-45deg);*/
          /*animation-delay: .9s;*/
          /*animation: conte .1s ;*/
          /*-webkit-animation: conte .1s ;*/
          /*animation-fill-mode: forwards;*/
        }
      }
    }
    .body {
      background-color: #fff;
      border-radius: .8rem;
      padding-top: 3rem;
      padding-bottom: 2rem;
      position: relative;
      z-index: 3540;
      .title {
        font-size: 1.8rem;
        margin-top: 2rem;
        color: @Master27;
      }
      .content {
        margin: auto;
        margin-top: 1rem;
        width: 80%;
        font-size: 1.5rem;
        text-align: left;
        color: @Master62;
      }
      .btns {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0rem 2rem;
        margin-top: 2rem;
      }
    }
  }
  @keyframes conte {
    0% {
      width: 2.2rem;
      height: 1.2rem;
    }
    100% {
      width: 2rem;
      height: 1rem;
    }
  }

  @keyframes contes {
    0% {
      opacity: 4;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes contebg {
    0% {
      width: 3rem;
      height: 3rem;
      margin-left: -1rem;
    }
    100% {
      width: 0rem;
      height: 0rem;
      margin-left: 2.5rem;
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(90deg);
      opacity: 1;
    }
    80% {
      transform: rotate(0deg);
      display: none;
    }
    100% {
      opacity: 0;
    }
  }
}
